<template>
  <div id="addPictureBatchPage">
    <a-card class="form-container">
      <h2 class="title">批量创建图片</h2>
      <a-form layout="vertical" :model="formData" :rules="rules" ref="formRef" @finish="handleSubmit">
        <a-form-item label="关键词" name="searchText">
          <a-input v-model:value="formData.searchText" placeholder="请输入关键词" />
        </a-form-item>
        <a-form-item label="抓取数量" name="count">
          <a-input-number
            v-model:value="formData.count"
            placeholder="请输入数量"
            class="full-width"
            :min="1"
            :max="30"
          />
        </a-form-item>
        <a-form-item label="名称前缀" name="namePrefix">
          <a-input v-model:value="formData.namePrefix" placeholder="请输入名称前缀，会自动补充序号" />
        </a-form-item>
        <a-form-item label="偏移量" name="offset" label-align="left">
          <a-input-number
            v-model:value="formData.offset"
            placeholder="请输入偏移量"
            :min="0"
            style="width: 100%;"
          />
        </a-form-item>
        <a-form-item label="分类" name="category">
          <a-auto-complete
            v-model:value="formData.category"
            :options="categoryOptions"
            placeholder="请输入分类"
            allowClear
            class="form-input"
          />
        </a-form-item>

        <a-form-item label="标签" name="tags">
          <a-select
            v-model:value="formData.tags"
            :options="tagOptions"
            mode="tags"
            placeholder="请输入标签"
            allowClear
            class="form-input"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" class="submit-btn" :loading="loading">
            🚀 执行任务
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { listPictureTagCategoryUsingGet, uploadPictureByBatchUsingPost } from '@/api/pictureController.ts'
import { message } from 'ant-design-vue'

const formRef = ref() // 表单引用
const formData = reactive<API.PictureUploadByBatchRequest>({
  searchText: '',
  count: undefined, // 需要确保表单校验
  namePrefix: '',
  offset: 0,
  category: '',
  tags: []
})
const loading = ref(false)
const router = useRouter()

// 表单校验规则
const rules = {
  searchText: [{ required: true, message: '关键词不能为空', trigger: 'blur' }],
  count: [{ required: true, message: '抓取数量不能为空', trigger: 'blur' }],
}

/**
 * 提交表单
 */
const handleSubmit = async () => {
  try {
    await formRef.value.validate() // 校验表单
    loading.value = true
    const res = await uploadPictureByBatchUsingPost({ ...formData })
    if (res.data.code === 0 && res.data.data) {
      message.success(`✅ 创建成功，共 ${res.data.data} 条`)
      router.push({ path: '/' })
    } else {
      message.error('❌ 创建失败：' + res.data.message)
    }
  } catch (error) {
    message.error('请填写完整信息')
  } finally {
    loading.value = false
  }
}

const categoryOptions = ref<string[]>([])
const tagOptions = ref<string[]>([])

/**
 * 获取标签和分类选项
 */
const getTagCategoryOptions = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.data.code === 0 && res.data.data) {
    tagOptions.value = (res.data.data.tagList ?? []).map((data: string) => ({
      value: data,
      label: data,
    }))
    categoryOptions.value = (res.data.data.categoryList ?? []).map((data: string) => ({
      value: data,
      label: data,
    }))
  } else {
    message.error('加载选项失败，' + res.data.message)
  }
}

onMounted(() => {
  getTagCategoryOptions()
})
</script>

<style scoped>
/* 页面整体居中 */
#addPictureBatchPage {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f7fa;
}

/* 卡片式布局 */
.form-container {
  width: 400px;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* 标题美化 */
.title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 24px;
}

/* 让输入框自适应宽度 */
.full-width {
  width: 100%;
}

/* 提交按钮美化 */
.submit-btn {
  width: 100%;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}
.submit-btn:hover {
  background-color: #1890ff;
  color: #fff;
  transform: scale(1.05);
}

/* 页面整体居中 */
#addPictureBatchPage {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
  padding: 20px;
}

/* 卡片式布局 */
.form-container {
  width: 450px;
  padding: 32px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* 标题美化 */
.title {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin-bottom: 28px;
}

/* 让输入框自适应宽度 */
.full-width {
  width: 100%;
}

/* 表单项间距优化 */
.a-form-item {
  margin-bottom: 20px;
}

/* 提交按钮美化 */
.submit-btn {
  width: 100%;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1890ff, #0056b3);
  color: white;
  border: none;
}
.submit-btn:hover {
  background: linear-gradient(135deg, #0056b3, #1890ff);
  transform: scale(1.05);
}

</style>
